<script>
import CategoryAside from '../components/mall/CategoryAside.vue'
import SortBar from '../components/mall/SortBar.vue'
import SearchControl from '../components/SearchControl.vue'
import ProductItem from '../components/mall/ProductItem.vue'

export default {
  name: 'MallView',

  components: {
    CategoryAside,
    SortBar,
    SearchControl,
    ProductItem
  },

  data() {
    return {
      products: [],
      productTypes: [],
      productCategories: {},
      cid: 0
    }
  },

  computed: {
    q() {
      return this.$store.state.route.query.q
    },

    c() {
      return this.$store.state.route.query.c
    },

    query() {
      return {
        q: this.q,
        c: this.c
      }
    }
  },

  watch: {
    q(value) {
      this.loadData()
    },

    c() {
      this.loadData()
    }
  },

  methods: {
    loadData() {
      this.$store
        .dispatch('FETCH_MALL_DATA', { params: this.query })
        .then(() => {
          this.products = this.$store.state.product.products
          this.productTypes = this.$store.state.product.productTypes
          this.productCategories = this.$store.state.product.productCategories
        })
    },

    sortbarChange(key, desc) {
      this.$store.commit('SET_SORT', { key, desc })
    },

    queryChange(value) {
      let query = this.query
      query.q = value
      this.updateQuery(query)
    },

    categoryChange(value) {
      let query = this.query
      query.c = value
      this.updateQuery(query)
    },

    updateQuery(query) {
      let queryString = Object.keys(query)
        .filter(key => !!query[key])
        .map(key => `${key}=${query[key]}`)
        .join('&')
      let url = queryString ? `${this.$route.path}?${queryString}` : this.$route.path
      this.$router.push(url)
    }
  },

  mounted() {
    this.queryInput = document.querySelector('input[name="q"]')
  },

  beforeMount() {
    this.loadData()
  }
}
</script>

<template>
<div class="product-block" style="min-height: 540px;">
  <div class="container">
    <div class="root-nav" style="margin: 5px 0;">
      <a @click="onClickCategory(0)">人马商城</a>&nbsp;>&nbsp;
      <a @click="onClickCategory(0)" :class="[cid ? '' : 'active']">所有商品</a>
      <template v-if="cid">
        &nbsp;>&nbsp;<strong>{{ getCategoryProperty(cid, 'name') }}</strong>
      </template>
    </div>
    
    <div class="product-wrap">
      
      <category-aside :types="productTypes"
        :categories="productCategories"
        @category-selected="categoryChange">
      </category-aside>

      <div class="product-inner">
        <div class="sort-block clearfix">
          <sort-bar @sortbar-change="sortbarChange"></sort-bar>
          <search-control :value="q" @searchcontrol-change="queryChange"></search-control>
        </div>
        
        <div class="products-grid clearfix">
          <product-item v-for="product in products" :product="product"></product-item>
        </div>

      </div>
    </div>
  </div>
</div>
</template>

<style>
@import '../../static/styles/product.css';

.sort-block {
  margin-bottom: 15px;
  height: 40px;
  border-bottom: 1px solid #eee;
}

.sort-block .sort-bar {
  float: left;
}

.sort-block .search-control {
  float: right;
}
</style>
